<template>
  <div class="c-bg-sgray">
    <div class="c-w100 c-flex-row c-aligni-center c-bg-white c-ph24 c-hh46 c-p">
      <div class="c-w100 c-hh46 c-pa c-p-t0 c-p-l0 c-bg-FF5355 c-opacity10"></div>
      <div class="c-fs20 c-fc-xlred">报名成功后，我们会尽快与您联系！</div>
    </div>
    <div class="c-ph24 c-flex-row c-justify-sb c-pv30 c-bg-white c-mb16">
      <div class="c-ww180 c-hh120 c-flex-shrink0 c-br10 c-p">
        <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-br36 c-br-tl10 c-pl8 c-pr16 c-flex-row c-aligni-center" :class="courseDetail.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
          {{courseDetail.saleCourseType==1?'体验课':'正式课'}}
        </div>
        <img :src="$addXossFilter(courseDetail.image, require('@/assets/activity_defult.png'))" class="c-w100 c-maxh120 c-br10" />
      </div>
      <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb c-ml20">
        <div class="c-text-ellipsis2 c-fs24 c-fc-xblack">{{courseDetail.saleCourseName}}</div>
        <div class="c-fs22 c-fc-gray c-text-ellipsis2" v-if="courseDetail.spec != null">{{courseDetail.spec[0].info}}</div>
      </div>
    </div>
    <div class="c-fs24 c-fc-gray c-ph24 c-bg-white" :class="intentionTimeBtn || intentionAddressBtn ? 'c-mb16' : ''">
      <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1"><span class="c-mr6 c-fc-xlred c-fs28">*</span>学员信息</div>
      <div class="c-flex-row c-aligni-center c-justify-sb c-hh80" @click="getStudentInfo">
        <div :class="studentInfo == '' ? 'c-fc-sgray' : 'c-fc-xblack'">{{studentInfo == "" ? '请选择学员信息' : studentInfo}}</div>
        <div class="iconfont c-fs16">&#xe60e;</div>
      </div>
    </div>
    <div class="c-fs24 c-fc-gray c-ph24 c-bg-white" v-if="intentionTimeBtn" :class="intentionAddressBtn ? 'c-mb16' : ''">
      <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1"><span class="c-mr6 c-fc-xlred c-fs28">*</span>上课时间</div>
      <div class="c-flex-row c-aligni-center c-justify-sb c-hh80">
        <group class="c-w100">
          <datetime :themeColor="$getThemeColor()" :class="nowTime == '请选择时间' ? 'placeholder-fc-sgray' : 'c-fc-xblack'" v-model="nowTime" :start-date="startDate" @on-confirm="confirmTime"></datetime>
        </group>
      </div>
    </div>
    <div class="c-fs24 c-fc-gray c-ph24 c-mb16 c-bg-white" v-if="intentionAddressBtn">
      <div class="c-flex-row c-aligni-center c-hh80 c-bd-b1">
        <div><span class="c-mr6 c-fc-xlred c-fs28">*</span>校区地点</div>
      </div>
      <!-- 已选择意向校区 -->
      <div class="c-pv24 c-bd-b1 c-fc-xblack" @click="showAddressInfo">
        <div class="c-flex-row c-justify-sb">
          <div class="c-flex-row">
            <div class="iconfont c-fs24 c-mr10" v-if="schoolName != ''">&#xe6a2;</div>
            <div :class="schoolName == '' ? 'c-fc-sgray' : 'c-fc-xblack'">{{schoolName == "" ? '选择意向校区' :schoolName}}</div>
          </div>
          <div class="iconfont c-fs16">&#xe60e;</div>
        </div>
        <div class="c-flex-row c-mt16">
          <div>{{fullAddress}}</div>
        </div>
      </div>
    </div>
    <div v-if="MarketingInfo && MarketingInfo.sales" class="c-fs24 c-ph24 c-fc-gray c-pt10">限时折扣活动不支持使用积分抵扣以及会员抵扣</div>
    <div v-if="MarketingInfo && MarketingInfo.collage" class="c-fs24 c-ph24 c-fc-gray c-pt10">拼团活动不支持使用积分抵扣以及会员抵扣</div>
    <!-- 选择校区弹出框 -->
    <open-modal class="c-pz1000" :openModal="showCoupon" @closeModal="showCoupon = false">
      <div class="c-w100 c-hh640 c-pf c-p-b0 c-br-tl24 c-br-tr24 c-bg-white c-pt30 c-ph24 c-pb120 c-flex-column">
        <div class="c-flex-row c-justify-center c-aligni-center c-p c-flex-shrink0 c-fs28">
          <div class="c-pa c-p-t-1 c-p-r0 c-fc-gray" @click="showCoupon = false">
            <span class="iconfont c-fs22 more-color c-ml10">&#xe8fd;</span>
          </div>
          <div v-if="classAddressNum !=''">校区地点 ({{classAddressNum}})</div>
        </div>
        <div class="c-mt10 c-contexty-scroll c-flex-grow1 c-fs24">
          <div class="c-pv30 c-bd-b1" v-for="(item,index) in addressInfo" :key="index" @click="selectAddress(index)">
            <div class="c-flex-row c-justify-sb">
              <div class="c-flex-row">
                <div class="iconfont c-fs24 c-mr10">&#xe90f;</div>
                <div>{{item.schoolName}}</div>
              </div>
              <div class="iconfont c-fs32" :class="addressIndex === '' ? 'c-fc-f2' : addressIndex === item.index ? 'theme-fc' : 'c-fc-f2'">&#xe6eb;</div>
            </div>
            <div class="c-flex-row c-mt20">
              <div class="c-pl36">{{item.fullAddress}}</div>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
    <!-- 选择学员弹出框 -->
    <open-modal class="c-pz1000" :openModal="showStudentCoupon" @closeModal="showStudentCoupon = false">
      <div class="c-w100 c-hh660 c-pf c-p-b0 c-br-tl24 c-br-tr24 c-bg-white c-pt30 c-flex-column c-pb100">
        <div v-if="studentList =='' || studentList ==null" class="c-fs28 c-textAlign-c c-fc-theme">请先添加学员</div>
        <div v-else class="c-contexty-scroll">
          <div class="c-flex-row c-justify-center c-aligni-center c-pf c-w100 c-bg-white c-pz1000 c-flex-shrink0 c-fs28 c-ph24">
            <div class="c-pa c-p-t-1 c-p-r24 c-fc-gray" @click="showStudentCoupon = false">
              <span class="iconfont c-fs22 more-color c-mr6">&#xe8fd;</span>
            </div>
            <div>选择学员 ({{studentToal}})</div>
          </div>
          <div class="c-mt44 c-contexty-scroll c-flex-grow1 c-fs24 c-ph24">
            <div class="c-pv20 c-bd-b1" v-for="(item,index) in studentList" :key="index">
              <div class="c-flex-row c-aligni-center">
                <div class="iconfont c-fs26" @click="edit(item.studentId)">&#xe90e;</div>
                <div class="c-ml10 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1" @click="selectStudent(item.index)">
                  <div class="c-ml40 c-text-ellipsis1">{{item.studentName}} <span class="c-ml20">{{item.mobile}}</span></div>
                  <div class="iconfont c-fs32" :class="studentIndex === '' ? 'c-fc-sgray' : studentIndex === item.index ? 'theme-fc' : 'c-fc-sgray'">&#xe6eb;</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-w100 c-maxw640 c-hh100 c-bd-t1 c-ph24 c-bg-white c-pf c-p-b0 c-flex-row c-aligni-center">
          <div class="c-w100 c-hh64 theme-bg-gradient c-fc-white c-fs28 c-flex-row c-flex-center c-br30" @click="addStudent">新增学员</div>
        </div>
      </div>
    </open-modal>

    <!-- 底栏 -->
    <div class="c-pf c-pz100 c-p-b0 c-w100 c-maxw640 c-bg-white c-hh100 c-flex-row c-aligni-center c-justify-end c-ph24">
      <div class="c-hh40 c-flex-row c-aligni-center">
        <div class="c-fc-gray c-lh32 c-fs24">共1件</div>
        <div class="c-fc-xblack c-lh32 c-fs28 c-fw500 c-ml20">合计：</div>
        <!-- 限时购或者拼团价格 -->
        <template v-if="isSale == 1 && MarketingInfo">
          <div class="theme-fc c-fs32 c-lh32">{{MarketingInfo.sales.price}}</div>
        </template>
        <template v-else-if="isSale == 2 && MarketingInfo">
          <div class="theme-fc c-fs32 c-lh32">{{groupId == -1 ? MarketingInfo.collage.captainPrice : MarketingInfo.collage.playersPrice}}</div>
        </template>
        <template v-else>
          <div class="theme-fc c-fs32 c-lh32" v-if="(courseDetail.spec != null && courseDetail.saleCourseType==2) || courseDetail.saleCourseType==1">{{courseDetail.saleCourseType==1 ? courseDetail.price : courseDetail.spec[0].price}}</div>
        </template>
      </div>
      <div class="c-ww180 c-hh64 theme-bg-gradient c-br40 c-fc-white c-fs28 c-flex-row c-aligni-center c-justify-center c-ml30" @click="submit">确认订单</div>
    </div>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common";
import { Datetime } from 'ckjrweb-mp-ui/src/components/index'
export default {
  name: "confirmOrder",
  components: {
    OpenModal,
    Datetime
  },
  props: [],
  beforeCreate() { },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      showCoupon: false, // 选择校区弹出框
      showStudentCoupon: false, // 选择学员弹出框
      studentList: [],
      studentIndex: "",
      addressIndex: "",
      pageIndex: 1,
      studentToal: "",
      studentInfo: "",
      cId: "", // 课程id
      extId: "", // 规格id
      jwSaleCourseSpecId: "",
      studentId: "",
      type: "",
      groupId: -1,
      classAddressNum: "",
      courseDetail: {},
      addressInfo: [],
      intentionAddressBtn: "", //用户是否需要提交意向上课地址
      intentionTimeBtn: "", //用户是否需要提交意向上课时间
      schoolName: "",
      fullAddress: "",
      nowTime: '请选择时间',
      date: '',
      startDate: "",
      isSale: 0, // 限时购或者拼团传过来 1 限时购，2，拼团
      price: 0, //限时购或者拼团传过来的价格
      pId: '',
      MarketingInfo: null, //限时购或拼团信息
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    getMarketingInfo() {
      // 获取限时购，拼团时得价格
      utilJs.getMethod(global.apiurl + "common/getMarketingInfo?prodId=" + this.extId + '&prodType=' + global.ckFrom.edu + '&jwSaleCourseSpecId=' + this.jwSaleCourseSpecId, res => {
        this.MarketingInfo = res;
      });
    },
    getStudentList() {
      utilJs.getMethod(global.apiurl + "educationSystem/student/binded?type=1", res => {
        this.studentToal = res.slice(1).length;
        this.studentList = res.slice(1);
      });
    },
    getStudentInfo() {
      this.studentList = [];
      this.$nextTick(res => {
        this.pageIndex = 1;
        this.getStudentList();
      })
      this.showStudentCoupon = true;
    },
    confirmTime(val) {
      this.date = val;
    },
    addStudent() {
      let pathQuery = {
        fromType: 0,
        cId: -1,
        extId: this.extId,
        type: this.type,
        jwSaleCourseSpecId: this.jwSaleCourseSpecId,
      }
      if (this.isSale == 1) {
        pathQuery.isSale = this.isSale;
        pathQuery.pId = this.pId;
      } else if (this.isSale == 2) {
        pathQuery.isSale = this.isSale;
        pathQuery.cId = this.$route.query.cId;
        pathQuery.ckFrom = global.ckFrom.collageEdu;
        pathQuery.collageId = this.$route.query.collageId;
        pathQuery.groupId = this.$route.query.groupId;
        pathQuery.prodId = this.$route.query.prodId;
      }
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.$routerGo(this, "replace", {
        path: "/edu/editStuInfo",
        query: pathQuery
      });
    },
    getTime() {
    },
    getCourseDetail() {
      let params = { type: this.type, saleCourseId: this.extId, saleCourseSpecId: this.jwSaleCourseSpecId };
      if (this.$route.query.stepIndex) {
        params.stepIndex = this.$route.query.stepIndex;
      }
      utilJs.postMethod(global.apiurl + 'educationSystem/showOrderConfirm', params, res => {
        this.courseDetail = res;
        this.addressInfo = res.addressInfo;
        this.intentionAddressBtn = res.intentionAddressBtn;
        this.intentionTimeBtn = res.intentionTimeBtn;
        if (!!res.addressInfo) {
          this.classAddressNum = res.addressInfo.length;
        }
        this.wechatShare();
      })
    },
    edit(id) {
      let pathQuery = {
        studentId: id,
        fromType: 1, //0表示新增学员 1表示编辑学员信息 2表示面授课学员管理中编辑
        cId: -1,
        extId: this.extId,
        jwSaleCourseSpecId: this.jwSaleCourseSpecId,
        type: this.type,
      }
      if (this.isSale == 1) {
        pathQuery.isSale = this.isSale;
        pathQuery.pId = this.pId;
      } else if (this.isSale == 2) {
        pathQuery.isSale = this.isSale;
        pathQuery.cId = this.$route.query.cId;
        pathQuery.ckFrom = global.ckFrom.collageEdu;
        pathQuery.collageId = this.$route.query.collageId;
        pathQuery.groupId = this.$route.query.groupId;
        pathQuery.prodId = this.$route.query.prodId;
      }
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.$routerGo(this, "push", {
        path: "/edu/editStuInfo",
        query: pathQuery
      })
    },
    selectStudent(index) {
      this.studentIndex = index;
      this.studentId = this.studentList[index].studentId;
      this.studentInfo = `${this.studentList[index].studentName} ${this.studentList[index].mobile}`;
      this.showStudentCoupon = false;
    },
    showAddressInfo() {
      this.showCoupon = !this.showCoupon;
    },
    selectAddress(index) {
      this.addressIndex = index;
      this.schoolName = this.addressInfo[index].schoolName;
      this.fullAddress = this.addressInfo[index].fullAddress;
      this.showCoupon = false;
    },
    submit() {
      if (this.studentIndex === "" || (this.addressIndex === "" && this.intentionAddressBtn == true) || (this.date === "" && this.intentionTimeBtn == true)) {
        let msg = this.studentIndex === '' ? '请选择学员' : this.date == '' && this.intentionTimeBtn == true ? '请选择日期' : this.addressIndex == '' && this.intentionAddressBtn == true ? '请选择地点' : '';
        this.$showCjToast({
          text: msg,
          type: 'warn',
        });
      } else {
        let pathQuery = {
          cId: -1,
          extId: this.extId,
          jwSaleCourseSpecId: this.jwSaleCourseSpecId,
          ckFrom: global.ckFrom.edu,
          studentId: this.studentId,
          jwSchoolId: this.addressIndex !== '' ? this.addressInfo[this.addressIndex].fullAddress != '' ? `${this.addressInfo[this.addressIndex].schoolName}(${this.addressInfo[this.addressIndex].fullAddress})` : this.addressInfo[this.addressIndex].schoolName : '',
          jwDate: this.date,
          pId: '',
        }
        if (this.isSale == 1) {
          pathQuery.pId = this.pId;
        } else if (this.isSale == 2) {
          pathQuery.cId = this.$route.query.cId;
          pathQuery.ckFrom = global.ckFrom.collageEdu;
          pathQuery.extId = this.$route.query.collageId;
          pathQuery.prodId = this.$route.query.prodId;
          if (this.$route.query.stepIndex) {
            pathQuery.stepIndex = this.$route.query.stepIndex;
          }
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        this.$routerGo(this, "replace", {
          path: "/homePage/course/coursePay",
          query: pathQuery
        });
      }
    },
    wechatShare: function () {
      let title = this.courseDetail.saleCourseName;
      let shareImg = this.courseDetail.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.courseDetail.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.courseDetail.introduction;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.courseDetail.saleCourseName;
      let shareImg = this.courseDetail.image;
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.courseDetail.id + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = this.courseDetail.introduction;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("确认订单"); // eslint-disable-line
    this.price = this.$route.query.price;
    this.isSale = this.$route.query.isSale;
    this.pId = this.$route.query.pId;
    this.extId = this.$route.query.extId;
    this.jwSaleCourseSpecId = this.$route.query.jwSaleCourseSpecId;
    this.groupId = this.$route.query.groupId;
    this.type = this.$route.query.type;
    this.goodsRoomId = this.$route.query.goodsRoomId || '';
    this.showCoupon = false;
    this.startDate = utilJs.dateFormat(Date.now());
    this.nowTime = '请选择时间';
    this.studentId = "";
    this.studentInfo = "";
    this.studentToal = "";
    this.classAddressNum = "";
    this.intentionAddressBtn = "";
    this.intentionTimeBtn = "";
    this.schoolName = "";
    this.fullAddress = "";
    this.studentIndex = "";
    this.addressIndex = "";
    this.pageIndex = 1;
    this.showStudentCoupon = false;
    this.courseDetail = {};
    this.addressInfo = [];
    this.MarketingInfo = null;
    this.getCourseDetail();
    this.studentList = [];
    if (this.isSale == 1 || this.isSale == 2) {
      this.getMarketingInfo();
    }
  },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.placeholder-fc-sgray {
  color: #cccccc !important;
}
</style>
